<template>
	<view class="u-p-t-40 u-p-r-60 u-p-l-60 u-p-b-30 logincontainer">
		<!-- 头像上传 -->
		<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
			<image class="avatar" :src="avatarUrl"></image>
		</button>

		<!-- 用户基本信息 -->
		<u-form class="forms" :model="registerModel" ref="form1">
			<u-form-item prop="nickname" left-icon="account-fill"
				:left-icon-style="{ fontSize: '24px', color: '#ff7670' }">
				<u-input placeholder="请输入昵称" v-model="registerModel.nickname" />
			</u-form-item>
			<u-form-item prop="phoneNum" left-icon="phone-fill"
				:left-icon-style="{ fontSize: '24px', color: '#ff7670' }">
				<u-input placeholder="请输入手机号" v-model="registerModel.phoneNum" />
			</u-form-item>
			<u-form-item prop="account" left-icon="account-fill"
				:left-icon-style="{ fontSize: '24px', color: '#ff7670' }">
				<u-input placeholder="请输入账号" v-model="registerModel.account" />
			</u-form-item>
			<u-form-item prop="password" left-icon="lock-fill"
				:left-icon-style="{ fontSize: '24px', color: '#ff7670' }">
				<u-input placeholder="请输入密码" v-model="registerModel.password" type="password" />
			</u-form-item>
			<u-form-item prop="confirmPassword" left-icon="lock-fill"
				:left-icon-style="{ fontSize: '24px', color: '#ff7670' }">
				<u-input placeholder="请再次确认密码" v-model="registerModel.confirmPassword" type="password" />
			</u-form-item>

			<u-form-item prop="sex" left-icon="man" :left-icon-style="{ fontSize: '24px', color: '#ff7670' }">
				<u-radio-group v-model="registerModel.sex">
					<u-radio :name="0">男</u-radio>
					<u-radio :name="1">女</u-radio>
					<u-radio :name="2">其他</u-radio>
				</u-radio-group>
			</u-form-item>
			<view class="logintext" @click="gotoLogin">
				已有账号，去登陆
			</view>
			<!-- 注册按钮 -->
			<u-button :custom-style="customStyle1" @click="handleRegister">注册</u-button>
		</u-form>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		register
	} from "../../api/user.js"
	import {
		onReady
	} from '@dcloudio/uni-app'
	// 设置表单属性
	const form1 = ref(null);
	// 注册表单数据模型
	const registerModel = reactive({
		phoneNum: '', // 手机号
		account: '', // 账号
		password: '', // 密码
		confirmPassword: '', // 确认密码
		nickname: '', // 昵称
		sex: 0, // 性别（默认男）
	});
	// 设置表单验证规则
	const rules = reactive({
		nickname: [{
			required: true,
			message: '请输入昵称',
			trigger: ['blur', 'change'],

		}],
		phoneNum: [{
			required: true,
			message: '请输入手机号',
			trigger: ['blur', 'change'],

		}, {
			pattern: /^1[3-9]\d{9}$/,
			message: '手机号格式不正确',
			trigger: ['blur', 'change'],
		}, ],

		account: [{
			required: true,
			message: '请输入账号',
			trigger: ['blur', 'change'],

		}],
		password: [{
			required: true,
			message: '请输入密码',
			trigger: ['blur', 'change'],

		}, {
			min: 3,
			max: 12,
			message: '密码长度必须在3到12位之间',
			trigger: ['blur', 'change'],
		}, ],

		confirmPassword: [{
			required: true,
			message: '请再次确认密码',
			trigger: ['blur', 'change'],

		}],
		// sex: [{
		// 	required: true,
		// 	message: '请选择性别',
		// 	trigger: ['change'],
		// }],

	})

	// 跳转到登录页面
	const gotoLogin = () => {
		uni.navigateTo({
			url: '/pages/login/login',

		});
	}
	// 头像URL
	const avatarUrl = ref('/static/pic/user.png');

	// 自定义样式
	const customStyle1 = reactive({
		marginTop: '40px',
		backgroundColor: '#fd473a',
		color: '#fff',
	});

	// 选择头像
	const onChooseAvatar = (e) => {
		avatarUrl.value = e.detail.avatarUrl; // 更新头像URL
	};

	// 注册逻辑
	const handleRegister = () => {
		// console.log('sex:', registerModel.sex); // 打印 sex 的值
		form1.value.validate(async (valid) => {
			if (valid) {
				if (registerModel.password !== registerModel.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none',
					});
					return;
				}

				// 调用注册接口
				let res = await register(registerModel);
				console.log("res", res)

				if (res && res.code == 200) {
					const userId = res.data.userId;
					uni.setStorageSync('userId', userId); // 存储 userId
					console.log('注册成功，userId:', userId);
					uni.showToast({
						title: '注册成功',
						icon: 'success',

					});

					// 跳转到实名信息认证页面
					wx.navigateTo({
						url: '/pages/register-auth/register-auth',
					});
					// // 跳转到登录页面
					// uni.navigateTo({
					// 	url: '/pages/login/login',

					// });
				}
			} else {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none',
				});
			}
		});
	};



	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady(() => {
		form1.value.setRules(rules);
	})
</script>

<style lang="scss">
	.logincontainer {
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;

		.forms {
			width: 100%;
		}
	}

	.avatar-wrapper {
		border-radius: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 70px;
		width: 70px;
		padding: 0px;

		.avatar {
			border-radius: 100%;
			height: 70px;
			width: 70px;
		}
	}

	.logintext {
		// 靠右
		text-align: right;
	}
</style>